import React, { useState, useEffect, useRef } from 'react';
import './item.less';
import Immutable, { Map } from 'immutable';
import {
  Input,
  Space,
  Tree,
  Modal,
  Button,
  Form,
  Select,
  Checkbox,
  Radio,
} from 'antd';
import {
  AudioOutlined,
  EditOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  UpCircleOutlined,
  DownCircleOutlined,
} from '@ant-design/icons';

const { Search, TextArea } = Input;

import { nanoid } from 'nanoid';

export default function (props) {
  const divRef = useRef('123');
  const [expandedKeys, setExpandedKeys] = useState([]); // 指定展开受控节点
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [treeData, setTreeData] = useState([
    // 树型 数据
    {
      title: '集体',
      key: '0',
      next: true, // 能否 添加下一级
      myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
      children: [
        {
          title: '物流组',
          key: '00',
          next: true, // 能否 添加下一级
          myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
        },
        {
          title: '总经办',
          key: '01',
          next: true, // 能否 添加下一级
          myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
        },
        {
          title: '门店',
          key: '02',
          next: true, // 能否 添加下一级
          myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
          children: [
            {
              title: '服务组',
              key: '000',
              myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
            },
            {
              title: '厨房',
              key: '001',
              myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
            },
          ],
        },
      ],
    },
    {
      title: 'DT组',
      key: '1',
      next: true, // 能否 添加下一级
      myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
    },
    {
      title: '财务组',
      key: '2',
      next: true, // 能否 添加下一级
      myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
    },
    {
      title: '运营组',
      key: '3',
      next: true, // 能否 添加下一级
      myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
    },
    {
      title: '培训组',
      key: '4',
      next: true, // 能否 添加下一级
      myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
    },
    {
      title: '企业组',
      key: '5',
      next: true, // 能否 添加下一级
      myShow: false, // 默认隐藏 最后的 添加 删除 修改 上移 下移 选项
    },
  ]);

  const [treeArr, setTreeArr] = useState([]); // 遍历 变成二维 数组  假的

  const [isModalVisible, setIsModalVisible] = useState(false); // 弹框 的 显示 和 隐藏
  const [form] = Form.useForm(); // form 表单 字段

  const [modalType, setmodalType] = useState('add');
  const [deleteKey, setDeleteKey] = useState(''); // 删除时 传过来的变量  key
  const [deleteName, setDeleteName] = useState(''); // 删除时 传过来的变量  name

  const [searchValue, setSearchValue] = useState(''); // 搜索的 value
  const onSearch = (value) => {
    // inpuit框 回车搜索事件
    // console.log('运营组', value);
    // console.log(searchFn(treeData, value))
    setSearchValue(value);
    let a = JSON.parse(JSON.stringify(searchFn(treeData, value)));
    // console.log('aaa', a); // a 就是 下标 key
    setExpandedKeys(a);
    // console.log('---',searchFn(treeData, value))
  };

  const searchFn = (arr, value) => {
    // 搜索的 函数
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].children) {
        if (arr[i].title.indexOf(value) >= 0) {
          newArr.push(arr[i].key);
        }
        searchFn(arr[i].children, value);
      } else {
        if (arr[i].title.indexOf(value) >= 0) {
          newArr.push(arr[i].key);
        }
      }
    }
    return newArr;
  };

  const loop = (data) =>
    data.map((item) => {
      //  console.log("item",item.title, item.title.indexOf('集'))
      let index = -2;
      if (searchValue) {
        index = item.title.indexOf(searchValue);
      }
      // const index = item.title.indexOf(searchValue);
      const beforeStr = item.title.substring(0, index);
      const afterStr = item.title.slice(index + searchValue.length);
      // console.log("index", index)
      const title =
        index > -1 ? (
          <span>
            {/* {beforeStr} */}
            <span style={{ color: 'red' }}>{item.title}</span>
            {/* {afterStr} */}
          </span>
        ) : (
          <span>{item.title}</span>
        );

      if (item.children) {
        return { title, key: item.key, children: loop(item.children) };
      }

      return {
        title,
        key: item.key,
        next: item.next,
        myShow: item.myShow,
      };
    });

  const newData = loop(treeData);

  const onSelect = (selectedKeys, info) => {
    // 选择中的 key ，  当前节点的信息

    console.log('树节点--YYYY', selectedKeys, info);
    let id = selectedKeys[0];

    if (info.selected) {
      // 如果 是 false
      cycleShowFn(newData, id, info.selected);
    } else {
      cycleShowFn(newData, id, info.selected); // 第二次点击时 隐藏
    }
  };

  const cycleShowFn = (arr, id, isShow) => {
    // 显示 和 隐藏 修改 删除 添加 等操作
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].children) {
        if (arr[i].key === id) {
          arr[i].myShow = isShow;
        } else {
          arr[i].myShow = false; // 其他的 全部隐藏
        }
        cycleShowFn(arr[i].children, id, isShow);
      } else {
        if (arr[i].key === id) {
          arr[i].myShow = isShow;
        } else {
          arr[i].myShow = false; // 其他的 全部隐藏
        }
      }
    }
    return arr;
  };

  const handleEdit = (e, { key, title }) => {
    //  编辑 以前的 节点名字
    e.stopPropagation(); // 阻止冒泡
    setmodalType('edit'); //  设置为 编辑
    setIsModalVisible(true); // 打开弹框
    form.setFieldsValue({
      systemName: title,
      higherOffice: key,
      systemType: 1,
    });
  };

  const handleDelete = (e, { key, title }) => {
    // 删除 这个 节点
    e.stopPropagation(); // 阻止冒泡
    setmodalType('delete'); //  设置为 删除
    setIsModalVisible(true); // 打开弹框
    setDeleteKey(key);
    setDeleteName(title);
  };

  const handleAddItem = (e, { key, title }) => {
    // 添加 子节点
    e.stopPropagation(); // 阻止冒泡
    setmodalType('addItem'); //  设置为 删除
    setIsModalVisible(true); // 打开弹框
    form.setFieldsValue({ higherOffice: key });
  };

  const handleUpon = (e, { key, title }) => {
    // 上移
    e.stopPropagation(); // 阻止冒泡
    // console.log("上移",key)
    let a = JSON.parse(JSON.stringify(cycleUponFn(treeData, key)));
    setTreeData(a);
    // console.log( cycleUponFn(treeData, key))
  };

  const cycleUponFn = (arr, key) => {
    //  上移 函数
    if (!Array.isArray(arr)) return; //  这货 是关键
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].children) {
        if (arr[i].key === key) {
          // console.log(i, '----', arr);
          // console.log(i, '相同的', arr[i]);
          // console.log("childer", arr[i].children)
          let UponItem = arr[i - 1];
          arr.splice(i - 1, 1); // 删除 上一项
          arr.splice(i, 0, UponItem); // 原理这边 放入下一项
          //  上移 的 bug
        }
        cycleUponFn(arr[i].children, key);
      } else {
        if (arr[i].key === key) {
          // console.log(i,"相同的",)
          let UponItem = arr[i - 1];
          arr.splice(i - 1, 1); // 删除 上一项
          arr.splice(i, 0, UponItem); // 原理这边 放入下一项
        }
      }
    }
    return arr;
  };

  const handleLower = (e, { key, title }) => {
    // 下移
    e.stopPropagation(); // 阻止冒泡
    // console.log('----',cycleLowerFn(treeData, key));
    let a = JSON.parse(JSON.stringify(cycleLowerFn(treeData, key)));
    setTreeData(a);
  };

  const cycleLowerFn = (arr, key) => {
    let show = true;
    //  下移 函数
    if (!Array.isArray(arr)) return; //  这货 是关键
    for (let i = 0; i < arr.length; i++) {
      // debugger
      // console.log(i)
      if (arr[i].children) {
        if (arr[i].key === key && show) {
          show = false;
          // console.log('删除', i);
          let lowerItem = arr[i];
          arr.splice(i, 1); // 删除 下一项
          // console.log(arr,'加入被删除的那一项', lowerItem, i);
          // debugger
          arr.splice(i + 1, 0, lowerItem); // 这样会使暂溢出，死循环
          // console.log("++++", arr)
        }
        cycleLowerFn(arr[i].children, key);
      } else {
        if (arr[i].key === key && show) {
          show = false;
          // console.log('删除', i);
          let lowerItem = arr[i];
          arr.splice(i, 1); // 删除 下一项
          // console.log(arr,'加入被删除的那一项', lowerItem, i);
          // debugger
          arr.splice(i + 1, 0, lowerItem); // 这样会使暂溢出，死循环
          // console.log("++++", arr)
        }
      }
    }
    return arr;
  };

  const onRightClick = ({ event, node }) => {
    响应右键点击;
    console.log('----', event);
    console.log(node);
  };

  const handleAddOrganization = () => {
    // 添加 组织架构 事件
    setIsModalVisible(true); // 打开 弹出框
    setmodalType('add'); //  设置为 删除
    // let a = JSON.parse(JSON.stringify(treeData))
    // a.push({title: "111", key: nanoid()})
    // setTreeData(a)
  };
  const handleOk = () => {
    // 弹框 确定按钮

    if (modalType === 'add') {
      form
        .validateFields()
        .then((res) => {
          // console.log("确定", res)
          setIsModalVisible(false);
          let value = res.higherOffice;
          let title = res.systemName;
          let a = JSON.parse(JSON.stringify(treeData));
          function foo(arr, count = 0) {
            // let count = 0;
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].children) {
                if (arr[i].key == value) {
                  if (arr[i].children) {
                    count += 1;
                    console.log('++++  111', i, count);
                    if (i >= 0) {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    } else {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    }
                  } else {
                    count += 1;
                    console.log('++++  000', i, count);
                    arr[i].children = [];
                    if (i >= 0) {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    } else {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    }
                  }
                }
                foo(arr[i].children);
              } else {
                if (arr[i].key == value) {
                  if (arr[i].children) {
                    count += 1;
                    console.log('----  111', i, count);
                    if (i >= 0) {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    } else {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    }
                  } else {
                    arr[i].children = [];
                    count += 1;
                    console.log('----  000', i, count);
                    if (i >= 0) {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    } else {
                      arr[i].children.push({
                        title,
                        key: nanoid(),
                        next: true,
                      });
                    }
                  }
                }
              }
            }
            return arr;
          }
          let b = JSON.parse(JSON.stringify(foo(a)));
          setTreeData(b);
          form.resetFields(); // 重置表单
          setIsModalVisible(false); // 关闭 弹出框
        })
        .catch((err) => {
          console.log('验证失败', err);
        });
    } else if (modalType === 'edit') {
      form.validateFields().then(({ systemName, higherOffice, systemType }) => {
        // console.log("编辑::", systemName, higherOffice, systemType)
        let a = JSON.parse(
          JSON.stringify(cycleEditFn(treeData, systemName, higherOffice)),
        );
        setTreeData(a);
        // console.log(cycleEditFn(treeData, systemName, higherOffice))
        setIsModalVisible(false); // 关闭 弹出框
      });
    } else if (modalType === 'delete') {
      let a = JSON.parse(JSON.stringify(cycleyDeleteFn(treeData, deleteKey)));
      setTreeData(a);
      // console.log(cycleyDeleteFn(treeData, deleteKey))
      setIsModalVisible(false); // 关闭 弹出框
    } else if (modalType === 'addItem') {
      form.validateFields().then((res) => {
        // console.log("添加：：", res)
        let name = res.systemName;
        let key = res.higherOffice;
        // console.log(cycleAddItemFn(treeData, key, name))
        let a = JSON.parse(JSON.stringify(cycleAddItemFn(treeData, key, name)));
        setTreeData(a);
        form.resetFields(); // 重置表单 一定要在 成功以后 情况表单
        setIsModalVisible(false); // 关闭 弹出框
      });
    }
  };

  const cycleAddItemFn = (arr, key, name) => {
    //  添加 子菜单
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].children) {
        if (arr[i].key === key) {
          arr[i].children.push({
            title: name,
            key: nanoid(),
            next: true,
            myShow: false,
          });
        }
        cycleAddItemFn(arr[i].children, key, name);
      } else {
        if (arr[i].key === key) {
          if (arr[i].children) {
            arr[i].children.push({
              title: name,
              key: nanoid(),
              next: true,
              myShow: false,
            });
          } else {
            arr[i].children = [];
            arr[i].children.push({
              title: name,
              key: nanoid(),
              next: true,
              myShow: false,
            });
          }
        }
      }
    }
    return arr;
  };

  const cycleyDeleteFn = (arr, key) => {
    //  删除 有 bug
    // for (let i = 0; i < arr.length; i++) {
    //   if (arr[i].children) {
    //     if (arr[i].key === key) {
    //       arr[i].children.splice(i, 1);
    //     }
    //     cycleyDeleteFn(arr[i].children, key);
    //   } else {
    //     if (arr[i].key === key) {
    //       // console.log(i,"删除-", arr[i])
    //       arr.splice(i, 1);
    //     }
    //   }
    // }

    if (arr.some((item) => item.key == key)) {
      // 判断 当前这一层是都找到值了
      arr.forEach((item, index) => {
        if (item.key == key) {
          console.log('item', item, 'index', index);
          arr.splice(index, 1);
        }
      });
    } else {
      arr.forEach((item) => {
        if (item.children && item.children.length)
          cycleyDeleteFn(item.children, key);
      });
    }
    return arr;
  };

  const cycleEditFn = (arr, name, key) => {
    // 修改名字 函数
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].children) {
        if (arr[i].key === key) {
          arr[i].title = name;
        }
        cycleEditFn(arr[i].children, name, key);
      } else {
        if (arr[i].key === key) {
          arr[i].title = name;
        }
      }
    }
    return arr;
  };

  const handleCancel = () => {
    //  弹框 取消按钮
    setIsModalVisible(false);
    form.resetFields(); // 重置表单
  };

  const handleChange = (value) => {
    // console.log(`选择框 ${value}`);
    // let a = JSON.parse(JSON.stringify(treeData))
    // function foo(arr) {
    //     for(let i=0; i<arr.length; i++) {
    //         if(arr[i].children) {
    //             if(arr[i].key == value) {
    //                 if(arr[i].children) {
    //                     if(arr[i].next) {  // 有 说明 push 的时候 + 上
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     } else {
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     }
    //                 } else {
    //                     arr[i].children = []
    //                     if(arr[i].next) { // 有 说明 push 的时候 + 上
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     } else {
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     }
    //                 }
    //             }
    //             foo(arr[i].children)
    //         } else {
    //             if(arr[i].key == value) {
    //                 if(arr[i].children) {
    //                     if(arr[i].next) {  // 有 push 的时候 就要 + 上
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     } else {
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     }
    //                 } else {
    //                     arr[i].children = []
    //                     if(arr[i].next) { // 有 说明需要 push 的时候 + 上
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     } else {
    //                         arr[i].children.push({ title: "22", key: nanoid() })
    //                     }
    //                 }
    //             }
    //         }
    //     }
    //     return arr
    // }
    // setTreeData(foo(a))
  };

  useEffect(() => {
    //  使用 递归 把 treeData 变成 二维数组
    let a = JSON.parse(JSON.stringify(treeData));
    let newArr = [];
    function foo(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].children && arr[i].next) {
          // 如果 有 next，就往 select 里面 push
          newArr.push({ title: arr[i].title, key: arr[i].key });
          foo(arr[i].children);
        } else {
          if (arr[i].next) {
            // 如果 有 next，就往 select 里面 push
            newArr.push({ title: arr[i].title, key: arr[i].key });
          }
        }
      }
      return newArr;
    }
    setTreeArr(foo(a));
  }, [treeData]);

  return (
    <div className="item_content" ref={divRef}>
      <div className="item_content_left">
        {/* 标题 */}
        <div>
          组织架构管理
          <span
            style={{ color: '#02a7f0', cursor: 'pointer', marginLeft: '10px' }}
            onClick={handleAddOrganization}
          >
            {' '}
            添加一段{' '}
          </span>
        </div>
        {/* 输入框 */}
        <div
          style={{
            margin: '15px 0px',
          }}
        >
          <Search
            placeholder="请输入"
            allowClear
            onSearch={onSearch}
            // style={{ width: 200 }}
          />
        </div>
        {/* 树形结构图 */}
        <div>
          <Tree
            // checkable  // 节点前添加 Checkbox 复选框
            // defaultExpandedKeys={['0-0-0', '0-0-2',' 0-1-0']}  // 默认展开指定的树节点
            // defaultSelectedKeys={['0-0' ,'0-0-0', '0-0-1', ]}  // 默认选中的树节点 第一位生效
            // defaultCheckedKeys={[, '0-0-1', ]}  // 默认选中复选框的树节点
            onSelect={onSelect} //  点击树节点触发
            // onCheck={onCheck}     //  点击复选框触发
            treeData={newData}
            // treeData={treeData}

            // showIcon   //  是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式

            // expandedKeys={expandedKeys} //  （受控）展开指定的树节点

            // autoExpandParent={autoExpandParent} //  是否自动展开父节点

            defaultExpandAll // 默认展开 所有 节点
            showLine // 是否展示连接线
            // onRightClick={onRightClick} // 响应右键点击
            titleRender={(nodeData) => {
              // console.log("---111111", nodeData)
              return (
                <div style={{ display: 'flex' }}>
                  {nodeData.title}
                  {nodeData.myShow && (
                    <div
                      style={{
                        background: '#fff',
                        paddingLeft: '15px',
                      }}
                    >
                      {/* 编辑 */}
                      <EditOutlined
                        style={{
                          margin: '6px',
                        }}
                        className="hover"
                        onClick={(e) => {
                          handleEdit(e, nodeData);
                        }}
                      />
                      <MinusCircleOutlined
                        className="hover"
                        onClick={(e) => handleDelete(e, nodeData)}
                      />
                      <PlusCircleOutlined
                        style={{
                          margin: '6px',
                        }}
                        className="hover"
                        onClick={(e) => {
                          console.log(nodeData);
                          handleAddItem(e, nodeData);
                        }}
                      />
                      <UpCircleOutlined
                        className="hover"
                        onClick={(e) => {
                          handleUpon(e, nodeData);
                        }}
                      />
                      <DownCircleOutlined
                        style={{
                          margin: '6px',
                        }}
                        className="hover"
                        onClick={(e) => {
                          handleLower(e, nodeData);
                        }}
                      />
                    </div>
                  )}
                </div>
              );
            }}
          />
        </div>
      </div>

      {/* 点击添加事件，触发 弹框 */}
      <Modal
        // title="新增架构"
        title={
          modalType == 'add'
            ? '新增架构'
            : modalType == 'edit'
            ? '编辑'
            : modalType == 'delete'
            ? '删除'
            : modalType == 'addItem'
            ? '添加'
            : null
        }
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {modalType == 'delete' ? (
          <div style={{ textAlign: 'center' }}>
            确定要删除 <span style={{ color: 'red' }}>{deleteName}</span> 吗？
          </div>
        ) : (
          <div>
            <Form form={form} autoComplete="off">
              <Form.Item
                label="架构名称"
                name="systemName"
                rules={[{ required: true, message: '请输入架构名称' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="上级部门"
                name="higherOffice"
                rules={[{ required: true, message: '请选择' }]}
              >
                <Select
                  onChange={handleChange}
                  disabled={
                    modalType === 'edit'
                      ? true
                      : modalType === 'addItem'
                      ? true
                      : false
                  }
                >
                  {treeArr.length > 0 &&
                    treeArr.map((item) => {
                      return (
                        <Option key={item.key} value={item.key}>
                          {item.title}
                        </Option>
                      );
                      // return ( <Select.OptGroup key={item.key} value={item.key}>{item.title}</Select.OptGroup> )
                    })}
                </Select>
              </Form.Item>

              <Form.Item
                label="架构类型"
                name="systemType"
                rules={[{ required: true, message: '请选择' }]}
              >
                <Radio.Group>
                  <Radio value={1}>公司</Radio>
                  <Radio value={2}>部门</Radio>
                </Radio.Group>
              </Form.Item>

              <Form.Item label="联系方式" name="connectWay">
                <Input placeholder="请输入手机号码或座机" />
              </Form.Item>

              <Form.Item label="地址" name="address">
                <Input />
              </Form.Item>

              <Form.Item label="备注" name="remark">
                <TextArea placeholder="请输入备注" />
              </Form.Item>
            </Form>
          </div>
        )}
      </Modal>
      <div className="item_content_right"></div>
    </div>
  );
}

// let obj = {
//   name: 'zs',
//   arr: [1, 2, 3, 4, 5, 5]
// }

// let immuObj = Map(obj)
// // 1。 通过get set 这
// console.log(immuObj, 12)
